<!-- 
 * 消息模版组件
 * @author: 
 * @since: 2022-05-23
 * index.vue
-->
<template>
  <div class="info-template-container p20">
    <el-table :data="state.tableData" style="width: 100%" :header-cell-style="state.headerStyle" fit border>
      <el-table-column prop="templateType" label="消息类型" />
      <el-table-column prop="templateNum" label="短信模版编号">
        <template #default="scope">
          <el-input v-model="scope.row.templateNum" maxlength="140" show-word-limit type="textarea" rows="4" v-if="state.currentId === scope.row.id" />
          <span v-else>{{ scope.row.templateNum }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="templateTitle" label="消息标题">
        <template #default="scope">
          <el-input v-model="scope.row.templateTitle" maxlength="140" show-word-limit type="textarea" rows="4" v-if="state.currentId === scope.row.id" />
          <span v-else>{{ scope.row.templateTitle }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="templateContent" label="消息内容">
        <template #default="scope">
          <el-input v-model="scope.row.templateContent" maxlength="140" show-word-limit type="textarea" rows="4" v-if="state.currentId === scope.row.id" />
          <span v-else>{{ scope.row.templateContent }}</span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="150" class="handle">
        <template #default="scope">
          <div class="handle-btn" v-if="state.currentId === scope.row.id">
            <el-button type="primary" @click="handle(1, scope.row)">提交</el-button>
            <el-button @click="handle(2, scope.row)">取消</el-button>
          </div>
          <el-button type="primary" @click="edit(scope.row)" v-if="state.currentId !== scope.row.id">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-box">
      <el-pagination background :currentPage="state.pagination.currentPage" :page-size="state.pagination.size" :total="state.pagination.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="state.pagination.currentPage" layout="total,sizes,prev, pager, next,jumper" :page-sizes="[10, 20, 30, 40]"></el-pagination>
    </div>
  </div>
</template>

<script setup>
import { reactive, onMounted } from 'vue'
import { getInfoTemplateListApi, infoTemplateEditApi } from '@/api/interface/info.js'
import { deepClone } from '@/utils/common.js'
import { successHandle } from '@/utils/common.js'

const state = reactive({
  headerStyle: { 'background-color': '#F6F9FB' },
  tableData: [],
  pagination: {//分页
    currentPage: 1,
    size: 10,
    total: 0,
  },
  currentId: null,//当前选中id
  currentRow: {},//当前数据

})

onMounted(() => {
  getInfoTemplateList()
})

//获取消息模版列表
const getInfoTemplateList = () => {
  const params = {
    ipi: state.pagination.currentPage,
    ips: state.pagination.size
  }
  getInfoTemplateListApi(params).then(res => {
    const { status, data } = res
    if (status === 200) {
      state.tableData = data.result
      state.pagination.total = data.total
      state.pagination.currentPage = data.pageNum
      state.pagination.size = data.pageSize
    }

  })

}
//消息模版修改
const infoTemplateEdit = (data) => {
  const params = {
    id: data.id,
    templateContent: data.templateContent,
    templateNum: data.templateNum,
    templateTitle: data.templateTitle
  }
  infoTemplateEditApi(params).then(res => {
    successHandle(res)
    getInfoTemplateList()
  })


}


//点击编辑
const edit = (data) => {
  state.currentId = data.id
  state.currentRow = deepClone(data);
}
//点击表格操作按钮
const handle = (type, data) => {//1.提交 2.取消
  state.currentId = null;
  switch (type) {
    case 1:
      infoTemplateEdit(data)
      break;
    case 2:
      state.tableData = state.tableData.map(item => item.id === data.id ? state.currentRow : item)
      break;
  }


}

//点击当前页
const handleCurrentChange = (val) => {
  state.pagination.currentPage = val;
  getInfoTemplateList()
}

//点击条数
const handleSizeChange = (val) => {
  state.pagination.size = val;
  getInfoTemplateList()
}

</script>

<style lang="scss" scoped>
.info-template-container {
  :deep(.cell) {
    font-size: $base-font-size-small;
  }
  .pagination-box {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 40px;
  }
}
</style>
